<template>
  <div class="profile-card-generator">
    <h2>个人信息卡片生成器</h2>
    
    <!-- 输入表单 -->
    <div class="form-section">
      <div class="form-group">
        <label for="name">姓名:</label>
        <input type="text" id="name" v-model="profile.name" placeholder="请输入姓名">
      </div>
      
      <div class="form-group">
        <label for="age">年龄:</label>
        <input type="number" id="age" v-model.number="profile.age" placeholder="请输入年龄">
      </div>
      
      <div class="form-group">
        <label for="occupation">职业:</label>
        <input type="text" id="occupation" v-model="profile.occupation" placeholder="请输入职业">
      </div>
      
      <!-- 性别选择 -->
      <div class="form-group">
        <label>性别:</label>
        <div class="radio-group">
          <label><input type="radio" v-model="profile.gender" value="male"> 男</label>
          <label><input type="radio" v-model="profile.gender" value="female"> 女</label>
          <label><input type="radio" v-model="profile.gender" value="secret"> 保密</label>
        </div>
      </div>
      
      <!-- 兴趣爱好选择 -->
      <div class="form-group">
        <label for="hobbies">兴趣爱好:</label>
        <select id="hobbies" v-model="profile.selectedHobbies" multiple>
          <option value="阅读">阅读</option>
          <option value="音乐">音乐</option>
          <option value="电影">电影</option>
          <option value="旅行">旅行</option>
          <option value="运动">运动</option>
          <option value="游戏">游戏</option>
          <option value="美食">美食</option>
          <option value="摄影">摄影</option>
        </select>
      </div>
      
      <!-- 主题切换按钮 -->
      <div class="form-group">
        <button @click="toggleTheme">
          切换到{{ theme === 'light' ? '深色' : '浅色' }}模式
        </button>
      </div>
    </div>
    
    <!-- 个人信息卡片预览 -->
    <div class="card-preview">
      <h3>卡片预览</h3>
      <div class="profile-card" :class="theme">
        <div class="card-header">
          <div class="avatar">
            <!-- 根据性别显示不同图标 -->
            <span v-if="profile.gender === 'male'" class="gender-icon male">♂</span>
            <span v-else-if="profile.gender === 'female'" class="gender-icon female">♀</span>
            <span v-else class="gender-icon secret">?</span>
          </div>
          <div class="basic-info">
            <h4>{{ profile.name || '未填写姓名' }}</h4>
            <p>{{ profile.occupation || '未填写职业' }}</p>
          </div>
        </div>
        
        <div class="card-body">
          <div class="info-item">
            <strong>年龄:</strong> 
            <span>{{ profile.age || '未填写' }}</span>
          </div>
          
          <!-- 条件渲染：根据年龄显示成年/未成年标识 -->
          <div class="info-item">
            <strong>状态:</strong> 
            <span v-if="profile.age >= 18 && profile.age" class="adult">成年</span>
            <span v-else-if="profile.age < 18 && profile.age" class="minor">未成年</span>
            <span v-else>未填写年龄</span>
          </div>
          
          <div class="info-item">
            <strong>性别:</strong> 
            <span>{{ genderText }}</span>
          </div>
          
          <div class="info-item hobbies">
            <strong>爱好:</strong>
            <div v-if="profile.selectedHobbies && profile.selectedHobbies.length > 0" class="hobby-tags">
              <span v-for="(hobby, index) in profile.selectedHobbies" :key="index" class="hobby-tag">
                {{ hobby }}
              </span>
            </div>
            <span v-else>未选择爱好</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 定义响应式数据
const profile = ref({
  name: '',
  age: null,
  occupation: '',
  gender: 'secret', // 默认保密
  selectedHobbies: []
})

// 主题状态
const theme = ref('light') // 默认浅色主题

// 计算属性：根据性别显示文本
const genderText = computed(() => {
  switch(profile.value.gender) {
    case 'male': return '男'
    case 'female': return '女'
    default: return '保密'
  }
})

// 切换主题方法
const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}
</script>

<style scoped>
.profile-card-generator {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.form-section {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.radio-group {
  display: flex;
  gap: 15px;
}

.radio-group label {
  font-weight: normal;
  display: flex;
  align-items: center;
}

.radio-group input {
  width: auto;
  margin-right: 5px;
}

.form-group select[multiple] {
  height: 120px;
}

.form-group button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.form-group button:hover {
  background-color: #0056b3;
}

.card-preview h3 {
  margin-bottom: 15px;
}

.profile-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 浅色主题 */
.profile-card.light {
  background-color: #fff;
  color: #333;
}

/* 深色主题 */
.profile-card.dark {
  background-color: #333;
  color: #fff;
  border-color: #555;
}

.card-header {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.profile-card.dark .card-header {
  border-bottom-color: #555;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
}

.profile-card.dark .avatar {
  background-color: #555;
}

.gender-icon.male {
  color: #007bff;
}

.gender-icon.female {
  color: #e83e8c;
}

.gender-icon.secret {
  color: #6c757d;
}

.basic-info h4 {
  margin: 0 0 5px 0;
}

.basic-info p {
  margin: 0;
  color: #666;
}

.profile-card.dark .basic-info p {
  color: #ccc;
}

.card-body {
  padding: 20px;
}

.info-item {
  margin-bottom: 10px;
  display: flex;
}

.info-item strong {
  width: 60px;
  margin-right: 10px;
}

.adult {
  color: green;
  font-weight: bold;
}

.minor {
  color: orange;
  font-weight: bold;
}

.hobby-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hobby-tag {
  background-color: #007bff;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.profile-card.dark .hobby-tag {
  background-color: #0056b3;
}
</style>